Fix: Preserve iframe preview when cancelling brick edit modal#38
Fix: Preserve iframe preview when cancelling brick edit modal#38hempsworth wants to merge 1 commit into
Conversation
Move `wire:ignore` from the `<iframe>` element to its parent `mason-editor-wrapper` div. When a Filament action modal is cancelled, the `unmountAction` Livewire response triggers a DOM morph that replaces the iframe element, causing the preview to go blank. Placing `wire:ignore` on the wrapper div ensures the entire subtree is preserved during morphs.
|
Can you provide a reproduction repo? I can't replicate this on either Filament v4 or v5. |
Ok, so this is interesting. It looks like the Grammarly Chrome extension is the cause. Grammarly injects a 
The patch still solves this, and theoretically, for any other tool like Grammarly that injects like this. Moving Gif here to show what I'm seeing with the Grammarly extension installed:
|
|
Interesting. What could possibly be causing grammarly to inject at that spot? That's weird to me. I'm also not sure that it's something specifically that can be handled by the plugin since it has no context of any external thing injecting its own code wherever it sees fit. |
|
i can confirm i also get this, and i also have Grammarly installed. |
Grammarly injects into every The problem for devs is we can't really disable this Grammarly behaviour, so it's something we would have to tell end-users to disable. |
|
I'm not opposed to it, but I also don't know that it's a guaranteed fix. Maybe it works for grammarly, but it's not a bullet proof solution. Especially considering that it doesn't make sense why grammarly is injecting into an html element that is not an actual input element. I'm willing to support a fix but not at the cost of supporting external things that I can't control. |
|
I will have to test further, but moving the wire:ignore can have implications on the filament get and set utilities too. |
3 participants
Problem
When editing a brick and cancelling (or closing) the modal, the iframe preview goes blank. Saving works fine — the issue only occurs when the modal is dismissed without saving.
Cause
When a Filament action modal is cancelled,
unmountActiontriggers a Livewire request. The server response causes a DOM morph to update the page. Withwire:ignoreon the<iframe>element itself, Livewire's morph algorithm can still replace the element if it cannot match it during tree diffing - thewire:ignoreattribute is only checked when the morpher updates an existing element, not when it decides to remove and re-insert one.Once the iframe is replaced, the Alpine component retains a stale reference to the old (now detached) element, and the new empty iframe is never populated with the preview content.
Solution
Move
wire:ignorefrom the<iframe>to its parent mason-editor-wrapper<div>. This tells Livewire to skip the entire subtree during morphs, preventing the iframe from being replaced.Changes
resources/views/mason.blade.php— movedwire:ignorefrom<iframe>to parent<div class="mason-editor-wrapper">.How to verify